<template>
  <FloatContainer class="block shadow-base">
    <el-row  class="text-left">
      <el-col :span="8">
        <el-avatar :size="60" class="text-center" style="margin: 24px 10px" :src="src"></el-avatar>
      </el-col>
      <el-col :span="16" style="margin-top: 15px">
        <el-row>
          <div style="padding: 5px 0;font-weight: bold">
            {{header}}
          </div>
        </el-row>
        <el-row>
          <small class="text-info">
            {{des}}
          </small>
        </el-row>
      </el-col>
    </el-row>
  </FloatContainer>
</template>

<script>
import RoundImage from '../../Common/RoundImage'
import FloatContainer from '../../Common/FloatContainer'

export default {
  name: 'MenuBlock',
  components: {
    RoundImage,
    FloatContainer
  },
  props: {
    header: {
      type: String,
      required: true
    },
    des: {
      type: String,
      required: true
    },
    src: {
      type: String,
      required: true
    }
  },
  computed: {
  }
}
</script>

<style lang="less" scoped>
  .block{
    width: 272px;
    height: 100px;
    border-radius: 3px;
  }

</style>
